import React from "react";
import { NavLink } from "react-router-dom";
import "./index.scss";
import { Pagination,Modal } from 'antd-mobile';
import {connect} from 'react-redux';
import actions from '../../store/modules/book/actions';

class Best extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            locale : {
                prevText: '上一页',
                nextText: '下一页',
            },
            modal: false,
        }
    }
    showModal = key => (e) => {
      e.preventDefault(); // 修复 Android 上点击穿透
      this.setState({
        [key]: true,
      });
    }
    onClose = key => () => {
      this.setState({
        [key]: false,
      });
    }

    render() {
        return (
        <div className="g-doc">
            <div className="g-hd">
                <ul className="m-pagenav">
                    <NavLink to="/">
                    <li className="itm iconfont icon-icon" />
                    </NavLink>
                    <li className="itmm">
                    <b />
                    </li>
                    <li className="itms">畅销榜</li>
                </ul>
                <div className="act">
                    <div className="m-login iconfont icon-sanheng" onClick={this.showModal('modal')} />
                    <NavLink to="/search">
                      <div className="m-search iconfont icon-sousuo" />
                    </NavLink>
                </div>
            </div>
            <div className="g-bd">
                <div className='m-category-list'>
                    <ul className='u-list-col1'>
                        {
                            this.props.excellentBooks.map(item => (
                                <li key={item.bookId}>
                                    <NavLink to={`/detail/${item.bookId}`}>
                                        <span className='cover'><img src={item.bookImg} /></span>
                                        <div className='info'>
                                            <h3>{item.bookName}</h3>
                                            <p className='author'>
                                                <span>{item.author}</span>
                                            </p>
                                            <p className="summary">{item.summary}</p>
                                        </div>
                                        <div className='u-price'>
                                            <em>¥ {item.price} </em>
                                            <del>¥ {item.priceDel}.00 </del>
                                        </div>
                                    </NavLink>
                                </li>
                            ))
                        }
                    </ul>
                    <Pagination 
                        total={Math.ceil(this.props.total / 10)} 
                        current={this.props.currentPage} 
                        locale={this.state.locale} 
                        onChange={(event) => {this.props.getExcellentBooks(event,this.props.pageSize)}}
                    />
                </div> 
                <div className="g-ft">
                  <div className="m-cprt">
                      <p className="m-crip">
                      <span>多看客户端</span>
                      <b>|</b>
                      <span>电脑版</span>
                      </p>
                      <p>Copyright©duokan.com</p>
                  </div>
                </div>
            </div>

            <Modal
              popup
              visible={this.state.modal}
              onClose={this.onClose('modal')}
              animationType="fade"
            >
              <div className="m-nav">
                <ul className="m-nav-top">
                  <li>
                    <NavLink
                      to="/special"
                      className="box"
                      style={{ backgroundColor: "#ef4848" }}
                    >
                      <i className="iconfont icon-sale" />
                    </NavLink>
                    <span>特价</span>
                  </li>
                  <li>
                    <NavLink
                      to="/free"
                      className="box"
                      style={{ backgroundColor: "#f7942b" }}
                    >
                      <i className="iconfont icon-Free-Tag" />
                    </NavLink>
                    <span>免费</span>
                  </li>
                  <li>
                    <NavLink
                      to="/best"
                      className="box"
                      style={{ backgroundColor: "#2ec8e4" }}
                    >
                      <i className="iconfont icon-tubiaolunkuo-" />
                    </NavLink>
                    <span>畅销</span>
                  </li>
                  <li>
                    <NavLink
                      to="/shelf"
                      className="box"
                      style={{ backgroundColor: "#2ec8e4" }}
                    >
                      <i className="iconfont icon-icon_shujianor" />
                    </NavLink>
                    <span>书架</span>
                  </li>
                </ul>
                <ul className="m-nav-bottom">
                  <li>
                    <NavLink
                      to="/classify"
                      className="box"
                      style={{ backgroundColor: "#02d26e" }}
                    >
                      <i className="iconfont icon-fenlei" />
                    </NavLink>
                    <span>分类</span>
                  </li>
                  <li>
                    <NavLink
                      to="/redeem"
                      className="box"
                      style={{ backgroundColor: "#4f8fd6" }}
                    >
                      <i className="iconfont icon-shuquan" />
                    </NavLink>
                    <span>兑换码</span>
                  </li>
                  <li>
                    <NavLink
                      to="/coupon"
                      className="box"
                      style={{ backgroundColor: "#7cc416" }}
                    >
                      <i className="iconfont icon-changxiaoremai" />
                    </NavLink>
                    <span>购书券</span>
                  </li>
                  <li>
                    <a
                      href="http://www.duokan.com/product"
                      className="box"
                      style={{ backgroundColor: "#f7942b" }}
                    >
                      <i className="iconfont icon-bangzhushouji" />
                    </a>
                    <span>客户端</span>
                  </li>
                </ul>
              </div>
            </Modal>
            
        </div>
        );
    }
    componentDidMount() {
        this.props.getExcellentBooks();
    }
}

export default connect(
    state => {
        return {
            excellentBooks: state.book.excellentBooks,
            total: state.book.total,
            currentPage: state.book.currentPage,
            pageSize: state.book.pageSize
        }
    },
    dispatch => {
        return {
            getExcellentBooks: (page =1,pageSize = 10) => {
                let payload = {
                    page,
                    pageSize
                };
                dispatch(actions.getExcellentBooksAct(payload));
            }
        }
    }
)(Best);

